<template>
    <div class="leftTop_warp">
        <div class="leftTop_warp_header">
             <el-button v-for="item in btnlist" :type="activeRow &&activeRow.datakey === item.datakey ?'isactiveBtn':''" :key="item.datakey" size="small" @click="btnClick(item)">{{item.label}}</el-button>
        </div>

        <div class="leftTop_warp_comend">
            <bar :chartData="chartData" v-if="chartData" />
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import {btn1,cityls} from '../data/dataconfig'
import {baroption} from "../data/echarts"
import bar from "../../../components/echarts/bar.vue";
const btnlist = ref(btn1)
const activeRow = ref(null)
const chartData = ref(null)
const btnClick = (row)=>{
    activeRow.value = row
    creatOption()
}
const creatOption = ()=>{
    let newbar = JSON.parse(JSON.stringify(baroption))
    newbar.xAxis.data = cityls
    newbar.series[0].data = [11,10,12,14,12,18,11,10]
    chartData.value =newbar 
}
onMounted(()=>{
  nextTick(()=>{
      btnClick(btnlist.value[0])
  })
})
</script>

<style lang="less" scoped>
.leftTop_warp{
    height: 100%;
    width: 100%;
}
.leftTop_warp_header{
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .el-button+.el-button{
        margin-left: 0;
      
    }
     .el-button{
       margin-right: 0.3rem;
        min-width: 2.8rem;
        background: rgba(0, 0, 0, 0);
        border: 0px;
        color: #fff;
        background-image: url(../../../assets/image/home/menu.png);
        background-size: cover;
        font-size: 0.8rem;
     }

     .el-button--isactiveBtn{
         background-image: url(../../../assets/image/home/menu-active.png);
        background-size: cover;
     }
}
.leftTop_warp_comend{
    height: calc(100% - 5.1rem);
}
</style>